<template>
  <div class="dev-guide">
    <h1>开发环境导航</h1>
    <div class="route-links">
      <button 
        v-for="route in routes" 
        :key="route.path"
        @click="openRoute(route.path)"
      >
        打开 {{ route.meta.title || route.name }}
      </button>
    </div>
    <div class="tips">
      <p>当前处于开发模式，请通过此页面访问各功能模块</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routes: [
        { path: '/dashboard', name: '控制台', meta: { title: '数据面板' } },
        { path: '/user-profile', name: '用户中心' },
        { path: '/settings', name: '系统设置' }
      ]
    }
  },
  methods: {
    openRoute(path) {
      const baseUrl = process.env.NODE_ENV === 'development' 
        ? 'http://localhost:8080' 
        : window.location.origin;
      
      const newTab = window.open(
        `${baseUrl}${path}`,
        '_blank',
        'width=1200,height=800'
      );
      
      // 防止被浏览器拦截
      if (!newTab) {
        alert('请允许弹出窗口以访问新页面');
      }
    }
  }
}
</script>

<style scoped>
.dev-guide {
  max-width: 800px;
  margin: 50px auto;
  text-align: center;
}
.route-links {
  display: grid;
  gap: 15px;
  margin: 30px 0;
}
button {
  padding: 12px 24px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}
button:hover {
  background: #35926b;
}
</style>